import React, { Component } from 'react'

export default class Header extends Component {
  state = {
    title: '',
  }

  onChange = (e) => {
    // console.log(e.target.value.trim())
    this.setState({ title: e.target.value.trim() })
  }

  addTodo1 = (e) => {
    const { title } = this.state
    if (e.key === 'Enter') {
      if (title.length === 0) {
        return alert('不能为空')
      }
      this.props.addTodo(title)
      this.setState({ title: '' })
    }
  }

  addTodo2 = () => {
    if (this.state.title.length === 0) {
      return alert('不能为空')
    }
    this.props.addTodo(this.state.title)
    this.setState({ title: '' })
  }

  render() {
    return (
      <>
        <header className="header">
          <h1>todos</h1>
          <input
            className="new-todo"
            placeholder="先想想做点什么?"
            autoFocus
            value={this.state.content}
            onChange={this.onChange}
            onKeyDown={this.addTodo1}
            // onBlur={this.addTodo2}
          />
        </header>
      </>
    )
  }
}
